<template>
	<div class="songlist">
		<el-table
			:data="songList"
			style="width: 100%"
		>
			<el-table-column label="收藏">
				<template #default="scope">
					<IconPark class="icon-like"
					:icon="Like" 
					theme="filled"
					size="16"
                    @click="cancelLike(scope.row.mvId)" />
				</template>
			</el-table-column>
			<el-table-column label="MV名称" prop="name" min-width="300">
				<template #default="scope">
					<p class="mv-title" @click="navigateToSongDetail(scope.row.mvId)">{{scope.row.name}}</p>
				</template>
			</el-table-column>
			<el-table-column  prop="author" label="歌手" min-width="160">
			</el-table-column>
		</el-table>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import IconPark from "./IconPark.vue";
import { Like } from '@icon-park/vue-next';
import { getLikeList } from "@/api";
import { useUserStore } from "@/store/user"
import { useRouter } from 'vue-router';
const router = useRouter();
const navigateToSongDetail = (id:number) => {
      router.push({ name: 'MV详情', params: { id } });
}
const { userId, MusicList } = useUserStore();

const songList = ref([])

getInit()
async function getInit() {
    songList.value = await getLikeList({type: 3, userId})
}

async function cancelLike(id: number) {
    await MusicList(3, id)
    getInit()
}
</script>

<style lang="less" scoped>
.icon-like {
    color: red;
    cursor: pointer;
}
.mv-title {
	cursor: pointer;
}
</style>